
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>





<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">
<title>Gabarit moteur de blog</title>
<link rel="stylesheet" href="index.css">

</head>


<body>

	<header>

		<div id="hleft">
			<div id="logo">
				<img id="image" alt="Logo"
					src="http://www.alsacreations.com/apple-touch-icon.png">
			</div>

			<div id="titre">
				Changer de langue : <a href="#">Français</a> - <a href="#">Anglais</a>

				<h1>TITRE DU BLOG</h1>

				<label>modifier votre style</label><br> <input type="radio"
					name="couleur" value="rouge" checked><label>rouge</label> <input
					type="radio" name="couleur" value="vert"><label>vert</label>
				<input type="radio" name="couleur" value="bleu"><label>bleu</label>
			</div>

		</div>


		<div id="hright">
			<h1>Identification :</h1>
			<br> <input type="text" id="login"> <br> <input
				type="text" id="mdp"><br>
			<button type="button">OK</button>
			<br> <a href="#">S'enregistrer</a> / <a href="#">Mdp perdu ?</a>


		</div>



	</header>

	<div id="main">




		<section>
			<article>
				<h1>TITRE DE l'article 01</h1>

				<label>Categorie </label><a href="#">Sport</a>

				<div class="content">
					<p>Contenu de l'article</p>
				</div>
				<label> Date de publication / Auteur / <a href="#">Voir
						les commentaires</a>
				</label> <a href="#">Commenter cet article</a>

			</article>
			<article>
				<h1>TITRE DE l'article 02</h1>

				<label>Categorie </label><a href="#">Politique</a>

				<div class="content">
					<p>Contenu de l'article</p>
				</div>
				<label> Date de publication / Auteur / <a href="#">Voir
						les commentaires</a>
				</label> <a href="#">Commenter cet article</a>
			</article>
		</section>

		<aside>
			<div class="liste" id="listeArticles">
				<p>Liste des 5 derniers articles publiés</p>
				<ul>
					<li><a href="#">Article 1</a></li>
					<li><a href="#">Article 2</a></li>
					<li><a href="#">Article 3</a></li>
					<li><a href="#">Article 4</a></li>
					<li><a href="#">Article 5</a></li>
				</ul>
			</div>

			<div class="liste" id="listeCategories">
				<p>Liste des catégories du blog</p>
				<ul>
					<li><a href="#">Sport</a></li>
					<li><a href="#">Actualités</a></li>
					<li><a href="#">Littérature</a></li>
					<li><a href="#">Jeux</a></li>
					<li><a href="#">Autre</a></li>
				</ul>
			</div>

			<div class="liste" id="listeLiens">
				<p>Liste des liens amis</p>
				<ul>
					<li><a href="#">Site 1</a></li>
					<li><a href="#">Site 2</a></li>
					<li><a href="#">Site 3</a></li>
					<li><a href="#">Site 4</a></li>
					<li><a href="#">Site 5</a></li>
				</ul>
			</div>
		</aside>

	</div>


	<footer>
		<p>Copyright Syntheses 2009 - Hébergement : xxxxx - Mentions
			légales</p>
	</footer>


</body>


</html>